/* 引入less */
/* 重置样式 */
require('../css/commCss/normalize.css')
/* 重置样式补充 */
require('../css/commCss/reset.css')
/* 公共样式 */
require('../css/commCss/property.css')
/* 公共属性 */
require('../css/commCss/basic.less')
/* 字体图标 */
require('../fonts/iconfont.css')
/* 当前页面 */
require('../css/courseTraining.less')

/* 引入axios */
const axios = require('axios');
/* 导入weui */
require('weui')
const weui = require('weui.js')

document.addEventListener('DOMContentLoaded', function () {
    //从后台拿到视频数据
    let fragments = JSON.parse(sessionStorage.fragments);
    console.log(fragments);
    //定义变量保存索引
    let index = 0;
    //获取中节数
    let courseNum = fragments.length;
    //定义开始训练时间
    let time1 = new Date();
    //定义训练停止时间
    let time2 = 0;
    //定义休息时间
    let time3 = 0;
    
    /* 获取节点 */
    const videoUrl = document.querySelector("#videoUrl");
    const title = document.querySelectorAll(".title");
    const nowNum = document.querySelector("#nowNum");
    const allNum = document.querySelector("#allNum");
    const lastPage = document.querySelector("#lastPage");
    const pause = document.querySelector("#pause");
    const nextPage = document.querySelector("#nextPage");
    const progress = document.querySelector("#progress");//进度条


    /* 渲染总节数*/
    allNum.textContent = courseNum;
    /* 渲染数据 */
    renderData()
    function renderData(){
        videoUrl.src = "http://139.9.177.51:8099" + fragments[index].videoUrl;
        title[0].textContent = fragments[index].title;
        nowNum.textContent = index + 1;
    }

    /* 点击上一个切换 */
    lastPage.addEventListener("click",function(){
        index--
        if(index === -1){
            index = courseNum - 1;
        }
        renderData()
    })
    /* 点击下一个切换 */
    nextPage.addEventListener("click",function(){
        index++
        if(index === courseNum){
            index = 0;
        }
        renderData()
    })
    /* 点击暂停按钮 */
    pause.addEventListener("click",function(){
        //显示蒙层
        document.querySelector(".mask").style.display = "block";
        //视频暂停
        videoUrl.pause();
        //获取暂停训练时间
        time2 = new Date()
    })
    /* 点击开始训练 */
    document.querySelector("#startTrain").addEventListener("click",function(){
        //隐藏蒙层
        document.querySelector(".mask").style.display = "none";
        //播放视频
        videoUrl.play();
        //获取休息完毕时间
        time3 = new Date();
    })
    /* 点击结束训练 */
    document.querySelector("#stopTrain").addEventListener("click",function(){
        //计算锻炼时间 = 总的时间 - 休息时间
        //总时间 = 开始训练的时间到休息完毕时间 = time3 - time1;
        //休息时间 = 训练暂停时间到休息完毕时间 = time3 - time2;
        let traninTime = (time3 - time1 - (time3 - time2)) / 1000 ;//得到秒数
        //console.log(traninTime);
        //整理向后台发送的数据
        let params = {
            id: sessionStorage.cid,
            userId: localStorage.userId,
            takeTime: traninTime,
            calorie: traninTime * 0.4
        }
        //console.log(params);
        //向后台发请求
        axios.post("http://139.9.177.51:8099/sports/saveTrain",params).then(function(res){
            if(res.data.status === 0){
                weui.toast(`太棒啦!消耗了${Math.ceil(params.calorie)}卡路里,相当于${(params.calorie/181).toFixed(2)}个鸡腿`,{
                    duration:1000,
                    callback:function(){
                        //跳转页面
                        location.href = "./course.html";
                    }
                })
            }else{
                weui.toast("真棒,还需要继续加油哦")
            }
        })
    })
    /* 进度条效果 */
    /* 
        总时长/当前时长=总宽度/当前宽度
        当前宽度 = 当前时长*总宽度/总时长
    */
    //视频时间更新时事件
    videoUrl.addEventListener("timeupdate",function(){
        //视频总时长
        let totalTime = videoUrl.duration;
        //视频当前时长
        let curTime = videoUrl.currentTime;

        let progressWidth = curTime * 100 / totalTime;

        //赋值给进度条宽度
        progress.style.width = progressWidth + "%";
    })
    //视频播放完成时
    videoUrl.addEventListener("ended",function(){
        //弹出提示框
        weui.toast("即将播放下一节视频",{
            duration: 1000,//提示框显示时间
            callback:function(){//回调函数
                nextPage.click();
            }
        })
    })
    
})